<template>
  <div class="test" style="width: 100%; margin-right: 20px; height:  400px;; float: right">
    <div id="NewEmployeesEveryYear" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
export default {
  name: "NewEmployeesEveryYear",
  data() {
    return {};
  },
  methods: {
    //New employees every year
    //每年新来员工-折线图
    getDataList() {
      this.$http.post("/count/NewEmployeesEveryYear").then((data) => {
        this.NewEmployeesEveryYear(data)
      });
    },
    NewEmployeesEveryYear: function (data) {
      const chart = this.$echarts.init(document.getElementById('NewEmployeesEveryYear'))
      const LineOption = {
        title: {
          top: 30,
          text: '每年新来员工',
          left: 'center',
          textStyle: {
            color: '#000'
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ",
        },
        xAxis: {
          type: 'category',
          data: data.year,
          name: "年",
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            barWidth: '60%',
            data: data.count,
            type: 'line'
          }
        ],
      };

      const BarOption = {
        title: {
          top: 30,
          text: '每年新来员工',
          left: 'center',
          textStyle: {
            color: '#000'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.year,
            name: "年",
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: data.count,
          }
        ]
      };
      chart.setOption(LineOption)
      // chart.setOption(BarOption)

    },
    thisYear() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
      };
      return date.year;
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>
